import React, { PureComponent } from 'react';
import { Icon, Form, Button, InputNumber } from 'antd';
import { connect } from 'dva';
import "./form.less"
import "../../Common.less"
import { requestFullScreen, exitFull } from "../../utils/fullScreen"
import { bus } from "../../utils/bus"
class AdminicularForm extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            max: 0,
            tdata: [],

        }
        this.submit = this.submit.bind(this)
        this.onChange1 = this.onChange1.bind(this)
        this.onChange2 = this.onChange2.bind(this)
    }
    async componentDidMount() {
        if (this.props.onLoaded) {
            this.props.onLoaded(this)
        }
        const { dictlist, extra } = this.props;
        if (extra.bearingPlinthId && extra.bearingPlinthId.length) {
            let res = await this.props.getByBearingPlinthIds({ bearingPlinthIds: extra.bearingPlinthId })
            const len = res.length;
            let arr = [];
            for (let i = 0; i < len; i++) {
                let item = res[i];
                let bearingPlinthSub = item.bearingPlinthSubs;

                const len2 = bearingPlinthSub.length;
                for (let j = 0; j < len2; j++) {
                    const item2 = bearingPlinthSub[j];
                    let merged = j == 0 ? true : false;
                    let merged2 = true;
                    let merged3 = true
                    if (j - 1 >= 0 && item2.spanId == bearingPlinthSub[j - 1].spanId) {
                        merged2 = false
                    }
                    if (j - 1 >= 0 && item2.spanId == bearingPlinthSub[j - 1].spanId&&item2.rowIndex == bearingPlinthSub[j - 1].rowIndex) {
                        merged3 = false
                    }
                    arr.push({
                        merged,
                        merged2,
                        merged3,
                        id: item2.id,
                        express: item.express,
                        listName: item.listName + '(' + item.express + ')',
                        station: item2.station,
                        boundary: item.boundary,
                        rowName: "第" + item2.rowIndex + "排",
                        num: item.num,
                        rowNum: item.rowNum,
                        tnum: len2,
                        rowDistance: item.rowDistance,
                        bearingType: item2.bearingType,
                        bearingSize: item2.bearingSize,
                        sort: item2.sort
                    })
                }

            }
            this.setState({
                tdata: arr
            })
        }
        this.setState({
            operateType: extra.operateType,
            bearingType: dictlist.filter(item => item.dictType == "bearing_type"),
            bearingSize: dictlist.filter(item => item.dictType == "bearing_size"),
        })


    }
    onConfirm(params = {}) {
        return new Promise((resolve, reject) => {
            const { tdata } = this.state
            this.props.updateBearingPlinthSub({ bearingPlinthSubs: tdata }, res => {

            }, err => {

            })
            console.log(tdata)
            if (params.onSuccess) {
                params.onSuccess(tdata);
            }
        })
    }
    submit() {
        const { form } = this.props;
        const { selectionOrSpanIds, bridgeId } = this.props.extra;
        form.validateFields((error, values) => {
            if (!error) {
                this.props.addBachBearingPlinth({ ...values, selectionListIds: selectionOrSpanIds, bridgeId }, res => {
                    const len = res.length;
                    let arr = [];
                    for (let i = 0; i < len; i++) {
                        let item = res[i];
                        let bearingPlinthSub = item.bearingPlinthSubs;

                        const len2 = bearingPlinthSub.length;
                        for (let j = 0; j < len2; j++) {
                            const item2 = bearingPlinthSub[j];
                            let merged = j == 0 ? true : false;
                            let merged2 = true;
                            let merged3 = true
                            if (j - 1 >= 0 && item2.spanId == bearingPlinthSub[j - 1].spanId) {
                                merged2 = false
                            }
                            if (j - 1 >= 0 && item2.spanId == bearingPlinthSub[j - 1].spanId&&item2.rowIndex == bearingPlinthSub[j - 1].rowIndex) {
                                merged3 = false
                            }
                            arr.push({
                                merged,
                                merged2,
                                merged3,
                                id: item2.id,
                                express: item.express,
                                listName: item.listName + '(' + item.express + ')',
                                station: item2.station,
                                boundary: item.boundary,
                                rowName: "第" + item2.rowIndex + "排",
                                num: item.num,
                                rowNum: item.rowNum,
                                tnum: len2,
                                rowDistance: item.rowDistance,
                                bearingType: item2.bearingType,
                                bearingSize: item2.bearingSize,
                                sort: item2.sort
                            })
                        }

                    }
                    console.log(arr)
                    this.setState({
                        tdata: arr
                    })
                    bus.emit("adminiculaFinish")
                }, err => {

                })
            } else {

            }
        })

    }
    onChange1(e, item) {
        item.bearingType = e.target.value
    }
    onChange2(e, item) {
        item.bearingSize = e.target.value
    }
    render() {
        const { getFieldDecorator } = this.props.form
        const { tdata, exit, bearingType, bearingSize, operateType } = this.state;
        return (
            <div id="AdminicularForm" className="AdminicularForm" style={{ height: "60vh", overflow: "auto"}}>
                {operateType != "preview" ? <Form

                    style={{ margin: "20px", padding: "20px 20px 0 0", border: "1px solid #dee2e6",boxShadow: "#f9f9f9 0px 0px 8px inset" }}
                    labelAlign="right"
                    labelCol={{ span: 6 }}
                    wrapperCol={{ span: 18 }}
                >


                    <Form.Item className="half" label='排数量'>
                        {getFieldDecorator('rowNum', {
                            rules: [
                                { required: true, message: '排数量' }
                            ],
                        })(
                            <InputNumber placeholder="请输入排数量" />
                        )}
                    </Form.Item>
                    <Form.Item className="half" label='每排个数'>
                        {getFieldDecorator('num', {
                            rules: [
                                { required: true, message: '每排个数' }
                            ],
                        })(
                            <InputNumber placeholder="请输入每排个数" />
                        )}
                    </Form.Item>
                    <Form.Item className="half" label='横向间距'>
                        {getFieldDecorator('rowDistance', {
                            rules: [
                                { required: true, message: '横向间距' }
                            ],
                        })(
                            <InputNumber placeholder="请输入横向间距" />
                        )}
                    </Form.Item>
                    <div className="half">

                    </div>
                    <Form.Item style={{ width: "100%" }}>
                        <Button onClick={this.submit} style={{ marginLeft: "15%" }} type="primary" className="login-form-button">确定</Button>
                    </Form.Item>
                </Form> : undefined}
                <div style={{ margin: "0 20px", width: "auto" }} className="tableBoxS tcBox">
                    {
                        !exit ? <Icon onClick={e => {
                            this.setState({
                                exit: true
                            })
                            requestFullScreen(document.querySelector(".ant-modal"))
                            if (operateType == "preview") {
                                document.querySelector(".AdminicularForm").style.height = "calc(100vh - 65px)"
                                document.querySelector(".ant-modal-body").style.height = "calc(100vh - 50px)"
                            } else {
                                document.querySelector(".AdminicularForm").style.height = "calc(100vh - 125px)"
                                document.querySelector(".ant-modal-body").style.height = "calc(100vh - 110px)"
                            }

                        }} className="fullScreen" type="fullscreen" /> : <Icon onClick={e => {
                            this.setState({
                                exit: false
                            })
                            exitFull()
                            document.querySelector(".AdminicularForm").style.height = "calc(70vh - 85px)"
                            document.querySelector(".ant-modal-body").style.height = "calc(70vh - 70px)"
                        }} className="fullScreen" type="fullscreen-exit" />
                    }


                    <table>
                        <tbody>
                            <tr className="th">
                                <td>联号</td>
                                <td>起止桩号</td>
                                <td>桩号</td>
                                <td>排号</td>
                                <td>序号</td>
                                {/* <td>排数/桩</td> */}
                                {/* <td>支座数量/排</td>
                                <td>支座横向间距</td>
                                <td>支座横向间距</td> */}
                                <td style={{ width: "120px" }}>支座类型</td>
                                <td style={{ width: "120px" }}>支座型号</td>
                            </tr>
                            {
                                tdata && tdata.length ? tdata.map((item, index) => {
                                    return <tr key={'tr2' + index}>
                                        {
                                            item.merged ? <td rowSpan={item.tnum}>{item.listName}</td> : undefined
                                        }
                                        {
                                            item.merged ? <td rowSpan={item.tnum}>{item.boundary}</td> : undefined
                                        }
                                        {
                                            item.merged2 ? <td rowSpan={Number(item.rowNum * item.num)}>{item.station}</td> : undefined
                                        }
                                        {
                                            item.merged3 ? <td rowSpan={item.num}>{item.rowName}</td> : undefined
                                        }
                                        <td>{item.sort}</td>
                                        {/* {
                                            item.merged3 ? <td rowSpan={item.num}>{item.rowNum}</td> : undefined
                                        }
                                        {
                                            item.merged3 ? <td rowSpan={item.num}>{item.num}</td> : undefined
                                        }
                                        {
                                            item.merged ? <td rowSpan={item.tnum}>{item.rowDistance}</td> : undefined
                                        } */}
                                        <td><select onChange={e => this.onChange1(e, item)} data-key="bearingType" className="input" data-name="支座类型" >
                                            <option style={{ display: "none" }}></option>
                                            {
                                                bearingType && bearingType.length ? bearingType.map((item, index) => {
                                                    return <option key={"bearingType" + index} value={item.id}>{item.dictLabel}</option>
                                                }) : undefined
                                            }

                                        </select></td>
                                        <td><select onChange={e => this.onChange2(e, item)} data-key="bearingSize" className="input" data-name="支座型号" >
                                            <option style={{ display: "none" }}></option>
                                            {
                                                bearingSize && bearingSize.length ? bearingSize.map((item, index) => {
                                                    return <option key={"bearingSize" + index} value={item.id}>{item.dictLabel}</option>
                                                }) : undefined
                                            }

                                        </select></td>
                                    </tr>
                                }) : <tr><td colSpan="7">no data</td></tr>
                            }
                        </tbody>
                    </table>
                </div>
            </div>
        );
    }
}

export default connect(
    ({
        dict: { dictlist },
        project: { current }
    }) => {
        return { project: current, dictlist };
    },
    dispatch => ({
        addBachBearingPlinth: (values, onSuccess, onError) => dispatch({
            type: 'structure/addBachBearingPlinth',
            payload: {
                values, onSuccess, onError
            }
        }),
        getBearingPlinthByBridgeId: (values) => dispatch({
            type: 'structure/getBearingPlinthByBridgeId',
            payload: values
        }),
        getByBearingPlinthIds: (values) => dispatch({
            type: 'structure/getByBearingPlinthIds',
            payload: values
        }),
        updateBearingPlinthSub: (values, onSuccess, onError) => dispatch({
            type: 'structure/updateBearingPlinthSub',
            payload: {
                values, onSuccess, onError
            }
        }),


    })
)(Form.create('AdminicularForm', {

})(AdminicularForm));